<template>
  <div>
    <p>{{ total }}</p>
    <p >{{ getSum()}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      boy: 222,
      girl: 2,
    };
  },
  //计算属性 : 1.只要依赖发生变化,计算属性就会重新计算 2.用法与data中的数据变量完全一致(配合用在插值或者配合指令) 3. 计算属性不能和data中的数据变量重名

  //优势: 带缓存
  //1. 依赖不变,直接从缓存取
  //2. 依赖项改变,函数自动执行,并重新缓存新的结果

  // 使用场景
  // 当某个变量值, 依赖其他变量计算而得到，推荐使用计算属性
  computed: {
    total() {
      return this.boy + this.girl;
    },
  },
  methods: {
    getSum() {
         return this.boy + this.girl;
    },
  },
};
</script>

<style>
</style>